<template>
  <div class="logo" :class="{ collapse: collapse }">
    <img src="/imgs/logo.png" />
    <h1>{{ title }}</h1>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  collapse: {
    type: Boolean,
    default: false,
  },
})

const title = ref('Timelog')
</script>
<style lang="scss" scoped>
.logo {
  height: 49px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 ;
  transition: width 0.3s ease;
  &.collapse {
    width: 64px;
    h1 {
      opacity: 0;
    }
  }
  img {
    height: 32px;
    margin-right: 12px;
  }
  h1 {
    opacity: 1;
    font-weight: 600;
    line-height: 50px;
    font-size: 14px;
    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
    vertical-align: middle;
    color: #303133;
    transition: opacity 0.3s ease;
  }
}
</style>
